<!DOCTYPE html>
<html>
<head>
  <title>图标生成器</title>
  <style>
    body {
      font-family: 'Microsoft YaHei', Arial, sans-serif;
      max-width: 800px;
      margin: 0 auto;
      padding: 20px;
    }
    .icon-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin: 20px 0;
    }
    .icon {
      width: 128px;
      height: 128px;
      background-color: #4285f4;
      border-radius: 20px;
      position: relative;
      margin-bottom: 20px;
    }
    .icon-arrow {
      position: absolute;
      top: 32px;
      left: 32px;
      width: 64px;
      height: 64px;
      background-color: white;
      clip-path: polygon(50% 0, 100% 50%, 75% 50%, 75% 100%, 25% 100%, 25% 50%, 0 50%);
    }
    .icon-dot {
      position: absolute;
      top: 16px;
      left: 56px;
      width: 16px;
      height: 16px;
      background-color: white;
      border-radius: 50%;
    }
    .instructions {
      background-color: #f5f5f5;
      padding: 20px;
      border-radius: 8px;
      margin-top: 20px;
    }
    .code {
      background-color: #eee;
      padding: 10px;
      border-radius: 4px;
      font-family: monospace;
      white-space: pre-wrap;
      margin: 10px 0;
    }
    button {
      background-color: #4285f4;
      color: white;
      border: none;
      padding: 10px 20px;
      border-radius: 4px;
      cursor: pointer;
      font-weight: bold;
      margin-top: 10px;
    }
    button:hover {
      background-color: #3367d6;
    }
    .download-links {
      display: flex;
      flex-direction: column;
      gap: 10px;
      margin-top: 20px;
    }
    canvas {
      display: none;
    }
  </style>
</head>
<body>
  <h1>Chrome扩展图标生成器</h1>
  
  <div class="icon-container">
    <div class="icon">
      <div class="icon-arrow"></div>
      <div class="icon-dot"></div>
    </div>
    <button id="generateBtn">生成图标</button>
    <div class="download-links" id="downloadLinks"></div>
  </div>
  
  <div class="instructions">
    <h2>使用说明</h2>
    <p>1. 点击"生成图标"按钮</p>
    <p>2. 下载生成的三种尺寸图标 (16x16, 48x48, 128x128)</p>
    <p>3. 将下载的图标文件放在扩展程序的根目录中</p>
    <p>4. 修改manifest.json文件，使用这些图标文件</p>
    
    <h3>manifest.json示例</h3>
    <div class="code">{
  "manifest_version": 3,
  "name": "快速收藏",
  "version": "1.0",
  "description": "一键收藏当前网站",
  "permissions": ["bookmarks", "tabs", "storage", "contextMenus"],
  "action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "icon16.png",
      "48": "icon48.png",
      "128": "icon128.png"
    }
  },
  "background": {
    "service_worker": "background.js"
  },
  "icons": {
    "16": "icon16.png",
    "48": "icon48.png",
    "128": "icon128.png"
  }
}</div>
  </div>
  
  <canvas id="canvas16" width="16" height="16"></canvas>
  <canvas id="canvas48" width="48" height="48"></canvas>
  <canvas id="canvas128" width="128" height="128"></canvas>
  
  <script>
    document.getElementById('generateBtn').addEventListener('click', function() {
      const sizes = [16, 48, 128];
      const downloadLinks = document.getElementById('downloadLinks');
      downloadLinks.innerHTML = '';
      
      sizes.forEach(size => {
        const canvas = document.getElementById(`canvas${size}`);
        const ctx = canvas.getContext('2d');
        
        // 背景
        ctx.fillStyle = '#4285f4';
        ctx.beginPath();
        ctx.roundRect(0, 0, size, size, size * 0.15);
        ctx.fill();
        
        // 箭头
        ctx.fillStyle = 'white';
        ctx.beginPath();
        const arrowSize = size * 0.5;
        const x = (size - arrowSize) / 2;
        const y = (size - arrowSize) / 2;
        
        ctx.moveTo(size/2, y);
        ctx.lineTo(x + arrowSize, y + arrowSize/2);
        ctx.lineTo(x + arrowSize * 0.75, y + arrowSize/2);
        ctx.lineTo(x + arrowSize * 0.75, y + arrowSize);
        ctx.lineTo(x + arrowSize * 0.25, y + arrowSize);
        ctx.lineTo(x + arrowSize * 0.25, y + arrowSize/2);
        ctx.lineTo(x, y + arrowSize/2);
        ctx.closePath();
        ctx.fill();
        
        // 圆点
        ctx.beginPath();
        ctx.arc(size/2, y - size * 0.05, size * 0.06, 0, Math.PI * 2);
        ctx.fill();
        
        // 创建下载链接
        const dataUrl = canvas.toDataURL('image/png');
        const link = document.createElement('a');
        link.href = dataUrl;
        link.download = `icon${size}.png`;
        link.textContent = `下载 ${size}x${size} 图标`;
        link.style.color = '#4285f4';
        downloadLinks.appendChild(link);
      });
    });
  </script>
</body>
</html>